<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2019/5/12
  Time: 20:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>login</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #wrap {
            height: 719px;
            width: 100;
            background-image: url(img/bg3.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
        }
        #head {
            height: 120px;
            width: 100;
            background-color: #66CCCC;
            text-align: center;
            position: relative;
        }
        #foot {
            width: 100;
            height: 126px;
            background-color: #CC9933;
            position: relative;
        }
        #wrap .logGet {
            height: 600px;
            width: 368px;
            position: absolute;
            background-color: #FFFFFF;
            top: 15%;
            left: 40%;
        }
        .logC a button {
            width: 100%;
            height: 45px;
            background-color: #40ee23;
            border: none;
            color: white;
            font-size: 18px;
        }
        .logC input button {
            width: 100%;
            height: 45px;
            background-color: #40ee23;
            border: none;
            color: white;
            font-size: 18px;
        }
        .logGet .logD.logDtip .p1 {
            display: inline-block;
            font-size: 28px;
            margin-top: 30px;
            width: 86%;
        }
        #wrap .logGet .logD.logDtip {
            width: 86%;
            border-bottom: 1px solid #ee7700;
            margin-bottom: 60px;
            margin-top: 0px;
            margin-right: auto;
            margin-left: auto;
        }
        .logGet .lgD img {
            position: absolute;
            top: 12px;
            left: 8px;
        }
        .logGet .lgD input {
            width: 100%;
            height: 42px;
            text-indent: 2.5rem;
        }
        #wrap .logGet .lgD {
            width: 86%;
            position: relative;
            margin-bottom: 30px;
            margin-top: 30px;
            margin-right: auto;
            margin-left: auto;
        }
        #wrap .logGet .logC {
            width: 86%;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }
        .smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select ,input[type="password"]{
            color: #555;
            height: 30px;
            line-height:15px;
            width: 100%;
            padding: 0px 0px 0px 10px;
            margin-top: 2px;
            border: 1px solid #E5E5E5;
            background: #FBFBFB;
            outline: 0;
            -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
            box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
            font: normal 14px/14px Arial, Helvetica, sans-serif;
        }

        .title {
            font-family: "宋体";
            color: #FFFFFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
            font-size: 36px;
            height: 40px;
            width: 30%;
        }
        #foot .copyright p {
            height: 24px;
            width: 100%;
        }
    </style>
</head>


<html>

<body>
<script language="javascript" type="text/javascript">
    function check1() {
        var name = document.getElementById("name");
        var email = document.getElementById("email");
        var passwd = document.getElementById("passwd");
        var passwd2 = document.getElementById("passwd2");
        var reMail =/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/;
        if (name.value==""||passwd.value==""||email==""||passwd2==""||name.value==null||passwd.value==null||email==null||passwd2==null) {
            alert("注册信息不能为空！");
            return false;
        }
        else if(passwd.value.length<6){
            alert("密码不能低于六位数！");
            return false;
        }
        else if(passwd.value!=passwd2.value) {
            alert("密码与确认密码不符！");
            return false;
        }
        else if(!reMail.test(email.value)){
            alert("邮箱格式错误！");
            return false;
        }
        else {
            alert("提交成功！");
            return true;
        }

    }
</script>
<div class="header" id="head">
    <div class="title">登录管理系统</div>

</div>

<div class="wrap" id="wrap">
    <div class="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
            <p class="p1">注册</p>
        </div>
        <form action="MakeRegister" method="post" onsubmit="return check1()">
        <!-- 输入框 -->
        <div class="lgD">
            <img src="img/user.png" width="20" height="20" alt=""/>
            <input id="name" type="text" name="name"
                   placeholder="输入用户名" />
        </div>
        <div class="lgD">
            <img src="img/password.png" width="20" height="20" alt=""/>
            <input id="passwd" type="text" name="passwd"
                   placeholder="输入用户密码" />
        </div>
        <div class="lgD">
            <img src="img/password.png" width="20" height="20" alt=""/>
            <input id="passwd2" type="text" name="passwd2"
                   placeholder="重复输入用户密码" />
        </div>
        <div class="lgD">
            <img src="img/user.png" width="20" height="20" alt=""/>
            <input id="email" type="text" name="email"
                   placeholder="用户邮箱" />
        </div>
        <div class="logC">
            <a href="MakeRegister" type="submit" target="_self"><button>确认注册</button></a>
        </div>
        </form>

        <br>
        <div class="logC">
            <a href="index.jsp" target="_self" class="font2"><button>返 回</button></a>
        </div>

    </div>
</div>



</body>
</html>